<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>网站信息</title>  
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>  
        <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/server.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div class="panel admin-panel" id="app">
  <div class="panel-head"><strong class="icon-reorder"> 订单管理</strong></div>

  <table class="table table-hover text-center">
    <tr>
      <th width="10%">订单编号</th>     
      <th>商品名称</th>  
        <th>价格</th> 
      <th>个数</th> 
         <th>收货人</th> 
             <th>收获电话</th> 
              <th>地址</th> 
       <th>总价</th> 
       <th>时间</th> 
      <th width="250">操作</th>
    </tr>
   
    <tr v-for="order  in  lists ">
      <td>{{order.id}}</td>      
      <td>{{order.product?order.product.prodName:''}}</td> 
       <td>{{order.product?order.product.prodPrice:''}}</td> 
         <td>{{order.orderProdCount}}</td>  
      <td>{{order.orderReceiver}}</td>  
      <td>{{order.orderTelphone}}</td> 
       <td>{{order.orderAddress}}</td> 
    
      
      <td>{{order.product?order.product.prodPrice:0*order.orderProdCount }}¥</td> 
      <td>{{order.orderDate}}</td> 
      <td>
      <div class="button-group">
      <a  v-if="order.orderStatus==0" type="button" class="button border-main" v-on:click="confirm(order.id)"><span class="icon-edit"></span>发货</a>
      
       <a class="button border-red" href="javascript:void(0)" v-on:click="del(order.id)"><span class="icon-trash-o"></span> 删除</a>
      </div>
      </td>
    </tr> 


  </table>
</div>


</body>

<script type="text/javascript">
	//Hint表示提示对象 ，把提示信息封装到hint对象中
	var vue = new Vue({
		el : '#app',
		data : {
			lists : [],
			web_server:window.web_server,
			web_static_server:this.web_server+"/static/"
		},
		methods : {
			init : function() {
				var _self = this;
				//自定义 一个函数 ，用来查询所有的商品信息，返回Json
				$.get(_self.web_server+"/order/list", function(result) {
					if(result.code=="200"){
						_self.lists = result.data;
					}
				
				}, "json");
			},
			del:function(_id){
				var _self = this;
				if(confirm("您确定要删除吗?")){
					$.get(_self.web_server+"/order/delete",{id:_id}, function(result) {
							if(result.code=="200"){
									window.location.reload();
							}
					
					}, "json");
		
				}
				
			},
			confirm:function(_id){
				var _self = this;
				if(confirm("您确定要发货吗?")){
					$.get(_self.web_server+"/order/confirm",{id:_id}, function(result) {
							if(result.code=="200"){
									window.location.reload();
							}
					
					}, "json");
		
				}
				
			}

		}

	});
	//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
	vue.init();
</script>





</html>